<template>
	<div class="bg-white">
		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2 border-bottom d-flex justify-content-between align-items-center">
				<span class="p-2 text-danhong text-lg">基本信息</span>
				<Button class="m-1" type="primary" @click="submit">保存</Button></Col>
			</div>
			<div>
				<Row class="mt-2">
					<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="text-xss p-2 bg-white rounded shadow">
						<span class="p-1">部门名称</span>
						<Input type="text" v-model="dept.name" placeholder="请输入部门名称"></Input>
					</div>
					</Col>
					<Col class="p-2" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="text-xss p-2 bg-white rounded shadow">
						<span class="p-1">部门负责人</span>
						<Select v-model="dept.empId">
							<Option v-for="emp in emps" :value="emp.empId" :key="emp.empId">{{emp.name}}</Option>
						</Select>
					</div>
					</Col>
				</Row>

			</div>
		</div>
		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2 border-bottom d-flex justify-content-between align-items-center">
				<span class="p-2 text-danhong text-lg">员工信息</span>
			</div>
		</div>	

		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2 border-bottom d-flex justify-content-between align-items-center">
				<span class="p-1 text-danhong text-lg">职位列表</span>
				<Button class="m-1 float-right" type="error" shape="circle" @click="newJob" icon="md-add">新增职位</Button>
			</div>
			<div class="mt-1 d-none d-xl-block">
				<Table border :class="'m-1'" :columns="tableInf.columnInfo" :data="tableInf.data">
					<template slot-scope="{ row, index }" slot="action">
						<Button type="primary" size="small" style="margin-right: 5px"
							@click="showJob(row)">详细</Button>
						<Button type="error" size="small" @click="removeJob(row.jobId)">删除</Button>
					</template>
				</Table>
			</div>
			<div class="mt-1 d-xl-none">
				<Row>
					<Col class="p-1" v-for="(role, index) in tableInf.data" :xs="24" :sm="24" :md="12" :lg="12">
					<div class="text-xss rounded shadow text-secondary p-1 bg-light">
						<div class="p-1 d-flex justify-content-between">
							<span>职位编号 </span><span>{{role.jobId}}</span>
						</div>
						<div class="p-1 d-flex justify-content-between">
							<span>职位名称 </span><span>{{role.name}}</span>
						</div>
						<div class="p-1 d-flex justify-content-end">
							<Button class="text-xss" type="error" size="small"
								@click="removeJob(role.jobId)">删除</Button>
							<Button class="text-xss ml-2" type="primary" size="small"
								@click="showJob(role)">详细</Button>
						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>

		<div class="shadow  radius  m-3 text-xs text-secondary">
			<div class="p-2 border-bottom d-flex justify-content-between align-items-center">
				<span class="p-1 text-danhong text-lg">流程列表</span>
				<Button class="m-1 float-right" type="error" shape="circle" @click="newFlow" icon="md-add">新增模板</Button>
			</div>
			<div class="mt-1 d-none d-xl-block">
				<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
					<template slot-scope="{ row, index }" slot="action">
						<Button type="primary" size="small" style="margin-right: 5px"
							@click="showFlow(row)">详细</Button>
						<Button type="error" size="small" @click="removeFlow(row.flowId)">删除</Button>
					</template>
				</Table>
			</div>
			<div class="mt-1 d-xl-none">
				<Row>
					<Col class="p-1" v-for="(role, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="12">
					<div class="text-xss rounded shadow text-secondary p-1 bg-light">
						<div class="p-1 d-flex justify-content-between">
							<span>流程编号 </span><span>{{role.flowId}}</span>
						</div>
						<div class="p-1 d-flex justify-content-between">
							<span>流程名称 </span><span>{{role.name}}</span>
						</div>
						<div class="p-1 d-flex justify-content-between">
							<span>职位 </span><span>{{role.jobName}}</span>
						</div>

						<div class="p-1 d-flex justify-content-end">
							<Button class="text-xss" type="error" size="small"
								@click="removeFlow(role.flowId)">删除</Button>
							<Button class="text-xss ml-2" type="primary" size="small"
								@click="showFlow(role)">详细</Button>

						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>
	</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				dept: {
					deptId: "",
					name: "",
					empId: "",
				},
				job: {
					jobid: "",
					name: "",
					pjobId:"",
				},
				flow: {
					flowId: "",
					name: "",
					jobName: "",
				},
				emps: [],
				tableInfo: {
					columnInfo: [{
							title: "流程编号",
							key: "flowId",
							align: 'center',
						},
						{
							title: "流程名称",
							key: "name",
							align: 'center',
						},
						{
							title: "职位",
							key: "jobName",
							align: 'center',
						},
						{
							title: "操作",
							slot: 'action',
							align: 'center',
							width: 150
						}
					],
					data: []
				},
				tableInf: {
					columnInfo: [{
							title: "职位编号",
							key: "jobId",
							align: 'center',
						},
						{
							title: "职位名称",
							key: "name",
							align: 'center',
						},
						{
							title: "操作",
							slot: 'action',
							align: 'center',
							width: 150
						}
					],
					data: []
				},
			}
		},
		methods: {
			init: function() {
				this.searchJob();
				this.searchDept();
				this.searchFlow();
				this.searchAllEmps();
			},
			submit: function() {
				this.http.put({
					url: "/dept/info",
					param: {
						dept: JSON.stringify(this.dept),
					}
				}).then(data => {
					this.message.info("保存成功");
				});
			},
			searchDept: function() {
				this.http.get({
					url: "/dept/info",
					param: {
						deptId: this.dept.deptId
					}
				}).then(data => {
					this.dept.deptId = data.deptId;
					this.dept.name = data.name;
					this.dept.empId = data.empId;
				});
			},
			searchFlow: function() {
				this.http.get({
					url: "/dept/flow/all",
					param: {
						deptId: this.dept.deptId
					}
				}).then(data => {
					this.tableInfo.data = data;
				});
			},
			searchAllEmps: function() {
				this.http.get({
					url: "/emp/all",
					param: {
						deptId: this.dept.deptId
					}
				}).then(data => {
					this.emps = data;
				});
			},
			showFlow: function(flow) {
				this.$router.detail.open({
					name: "flow_detail",
					params: {
						flow: JSON.stringify(flow)
					}
				});
			},
			removeFlow: function(flowId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除流程，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/dept/flow/info",
							param: {
								flowId
							}
						}).then(data => {
							this.message.info('删除成功');
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			newFlow: function() {
				this.$router.detail.open({
					name: "flow_new",
					params: {
						deptId: this.dept.deptId
					}
				});
			},
			searchJob: function() {
				this.http.get({
					url: "/dept/job/all",
					param: {
						deptId: this.dept.deptId
					}
				}).then(data => {
					this.tableInf.data = data;
				});
			},
			showJob: function(job) {
				this.$router.detail.open({
					name: "job_detail",
					params: {
						deptId:this.dept.deptId,
						deptName: this.dept.name,
						jobName: job.name,
						jobId: job.jobId,
						pJobId:job.pjobId
					}
				});
			},
			removeJob: function(jobId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除职位，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/dept/job/info",
							params: {
								jobId
							}
						}).then(data => {
							this.message.info('删除成功');
							this.searchJob();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			newJob: function() {
				this.$router.detail.open({
					name: "job_new",
					params: {
						deptId: this.dept.deptId,
						deptName: this.dept.name,
					}
				});
			},
		},
		created: function() {
			this.dept.deptId = this.$route.query.deptId;
			this.init();
		},
	}
</script>

<style>
</style>
